<template>
  <div class="summary-container">
    <el-row>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="title">总览</span>
          <el-button style="float: right; padding: 3px 0" type="text">设置预算</el-button>
        </div>
        <div class="time-period">{{timePeriod}}</div>
        <div class="summary">
          <div class="summary-item">
            <div class="money-type">支出</div>
            <div class="money-value">{{this.amount.expense}}</div>
          </div>
          <div class="summary-item">
            <div class="money-type">收入</div>
            <div class="money-value">{{this.amount.income}}</div>
          </div>
          <div class="summary-item">
            <div class="money-type">结余</div>
            <div class="money-value">{{this.amount.income}}</div>
          </div>

        </div>
        <div>
          <div>还可以支出{{this.budget}}元</div>
        </div>
        <div class="compareSamePeriod">
          <div class="title-second">
            上月同期支出对比Top3
          </div>
          <div class="body">
            <div class="compare-item">
              <compare-chart :clatestcategorytop3="latestCategoryTop3[0]" :cLastCategoryTop3="lastCategoryTop3[0]"></compare-chart>
            </div>
            <div class="compare-item">
              <compare-chart :clatestcategorytop3="latestCategoryTop3[1]" :cLastCategoryTop3="lastCategoryTop3[1]"></compare-chart>
            </div>
            <div class="compare-item">
              <compare-chart :clatestcategorytop3="latestCategoryTop3[2]" :cLastCategoryTop3="lastCategoryTop3[2]"></compare-chart>
            </div>
          </div>
        </div>
      </el-card>
    </el-row>
    <el-row>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="title">预算</span>
          <el-button style="float: right; padding: 3px 0" type="text">设置预算</el-button>
        </div>
        <div v-for="o in 4" :key="o" class="text item">
          {{'列表内容 ' + o }}
        </div>
      </el-card>
    </el-row>
    <el-row>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="title">汇总</span>
          <el-button style="float: right; padding: 3px 0" type="text">设置预算</el-button>
        </div>
        <div v-for="o in 4" :key="o" class="text item">
          {{'列表内容 ' + o }}
        </div>
      </el-card>
    </el-row>
    <el-row>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="title">收入</span>
          <el-button style="float: right; padding: 3px 0" type="text">设置预算</el-button>
        </div>
        <div v-for="o in 4" :key="o" class="text item">
          {{'列表内容 ' + o }}
        </div>
      </el-card>
    </el-row>
    <el-row>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="title">支出</span>
          <el-button style="float: right; padding: 3px 0" type="text">设置预算</el-button>
        </div>
        <div v-for="o in 4" :key="o" class="text item">
          {{'列表内容 ' + o }}
        </div>
      </el-card>
    </el-row>
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="32">
        <div class="chart-wrapper">
          <bar-chart :cSeries="weekDayExpense"/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import { getNewestBill } from '@/api/bill'
  import CompareChart from '@/components/CompareChart'
  import BarChart from "@/views/dashboard/BarChart";

  export default {
    name: "billSummary",
    components: {
      CompareChart,
      BarChart
    },
    data() {
      return {
        // 金额
        amount: {
          // 支出
          expense:0,
          // 收入
          income: 0,
          // 结余
          balance: 0,
          //
          budget:0
        },
        // 预算
        budget:0,
        // 支出列表：分类和支出金额（按金额由大到小）
        costList: [],
        // 最近的账单的月份
        monthLatest:1,
        // 最近账单月份的top3
        latestCategoryTop3:[
          {
            categoryId: 1,
            value: 100
          },
          {
            categoryId: 2,
            value: 200
          },
          {
            categoryId: 3,
            value: 300
          }
        ],
        lastCategoryTop3:[
          {
            categoryId: 1,
            value: 200
          },
          {
            categoryId: 2,
            value: 400
          },
          {
            categoryId: 3,
            value: 100
          }
        ],
        // 一周内每天消费的总额
        weekDayExpense:[
          { id: 1, name: ""}
        ],
        // 一年内每月消费的总额
        yearMonthExpense:[],
        // 一级类别的消费额和百分比
        firstCategoryExpense:[]
      }
    },
    // 计算属性，是当做属性来使用的
    computed: {
      // 定义的是函数
      // 一般都是名词
      timePeriod: function () {
        const day = new Date().getDate()
        console.log(day)
        return this.monthLatest + "月" + "01日"  + "-" + this.monthLatest + "月" + day + "日"
      },
      canBeCost: function() {
        return this.budget - this.amount.expense
      }
    },
    created() {
      // this.getNewestBillTime()
    },
    methods: {
      // 获取最新账单的年月日
      getNewestBillTime() {
        getNewestBill().then(response => {
          this.year = response.year
        })
      },
      // 按月份获取总支出、总收入和结余
      getAmount() {},
      // 按月份获取本月当前支出列表（排序：支出金额从大到小）
      getCostList() {},
      // 获取上月同期支出
      getCostLastMonth() {},
      // 获取上月同期支出
    }
  }
</script>
<style scoped>
.summary-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
}
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
  .box-card {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
.title {
  margin-left: 10px;
  font-size: 20px;
}
  .time-period {
    line-height: 50px;
  }
  .summary {
    display: flex;
  }
  .summary-item {
    flex: 1;
    border: #ccccff 2px solid;
  }
  .money-type,
  .money-value{
    text-align: center;
    font-weight: bold;
    line-height: 40px;
  }
.body {
  display: flex;
}
.compare-item {
  flex: 1;
}
</style>
